<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.type" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="sale" >我的</el-menu-item>
        <el-menu-item index="all" v-if="allSaleDeliver">全部</el-menu-item>
    </el-menu>

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="发货单号：">
          <el-input v-model="listQuery.deliverSn"></el-input>
        </el-form-item>
        <el-form-item label="发货日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.deliverDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单号：" >
          <el-input v-model="listQuery.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="客户编号：">
          <el-input v-model="listQuery.customerNumber"></el-input>
<!--          <el-autocomplete-->
<!--                  clearable-->
<!--                  class="inline-input"-->
<!--                  value-key="customerName"-->
<!--                  :fetch-suggestions="querySearch"-->
<!--                  v-model="listQuery.customerName"-->
<!--                  placeholder="请输入内容"-->
<!--                  @select="handleSelectCustomerName"-->
<!--                  :trigger-on-focus="false"-->
<!--          ></el-autocomplete>-->
        </el-form-item>

        <el-form-item label="司机信息：" >
          <el-input v-model="listQuery.driverKeywords" placeholder="手机号，姓名，车牌号"></el-input>
        </el-form-item>
        <el-form-item label="单据类型：" >
          <el-select v-model="listQuery.deliverType" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="1" label="发货单" :key="1"></el-option>
            <el-option :value="2" label="退货单" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="司机状态：" >
          <el-select v-model="listQuery.driverState" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="1" label="已维护" :key="1"></el-option>
            <el-option :value="2" label="未维护" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用状态：" >
          <el-select v-model="listQuery.expressState" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="1" label="已维护" :key="1"></el-option>
            <el-option :value="2" label="未维护" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货状态：" >
          <el-select v-model="listQuery.status" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="1" label="进行中" :key="1"></el-option>
            <el-option :value="2" label="已完成" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用报销：" >
          <el-select v-model="listQuery.settlementState" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="1" label="已结算" :key="1"></el-option>
            <el-option :value="2" label="未结算" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="派单员：" >
          <el-select v-model="listQuery.driverChargeUserId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="送货类型：" >
          <el-select v-model="listQuery.isYunlianDeliver" filterable placeholder="请选择" clearable>
            <el-option
                    :key="1"
                    label="运联发货"
                    :value="1">
            </el-option>
            <el-option
                    :key="0"
                    label="采购发货"
                    :value="0">
            </el-option>
            <el-option
                    :key="2"
                    label="自提"
                    :value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用类型：" >
          <el-select v-model="listQuery.freightType" filterable placeholder="请选择" clearable>
            <el-option key="sale" label="销售承担" value="sale"></el-option>
            <el-option key="purchase" label="采购承担" value="purchase"></el-option>
            <el-option key="logistics" label="运联承担" value="logistics"></el-option>
            <el-option key="customer" label="客户承担" value="customer"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务员：" v-if="listQuery.type=='all'">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>

          <el-button
                  :loading="btnloading3"
                  v-if="exportAllSaleDeliver && listQuery.type=='all'"
                  @click="downloadExcel()"
                  type="primary">
            导出
          </el-button>

        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
              v-loading="listLoading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="单据类型" width="120" align="center" prop="deliverTypeStr">
        </el-table-column>
        <el-table-column  label="发货日期" width="100" align="center" prop="shipTime">
        </el-table-column>
        <el-table-column  label="发货单号" width="150" prop="deliverSn" align="center">
          <template slot-scope="scope">
            <span style="vertical-align: middle">
              <el-link @click="toDetail(scope.row)" type="primary">
                {{scope.row.deliverSn}}
              </el-link>

            </span>
            <img src="../../assets/images/zhuofei2.png"  style="vertical-align: middle;" v-if="scope.row.isDelete"/>
            <img src="../../assets/images/bian.png" v-if="scope.row.isUpdate" style="vertical-align: middle;"/>
          </template>
        </el-table-column>
        <el-table-column  label="客户编号" width="300" prop="customerNumber">
          <template slot-scope="scope">
            <div>
              {{scope.row.customerNumber}}
            </div>
            <!--是否有权限-->
            <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
          </template>
        </el-table-column>
        <el-table-column  label="订单号" width="140" align="center" class-name="cspantd">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
              <el-link @click="toOrderDetail('edit',item)" type="primary">
                {{item.orderSn}}
              </el-link>

            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="送货类型"
                align="center"
                width="100">
          <template slot-scope="scope">
            {{scope.row.indexSendType}}
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                label="商品牌号"
                align="center"
                width="200">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
              {{item.goodsSn}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                label="预计发货仓库"
                width="100"
                align="center">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
              {{item.warehouseName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                label="实际发货仓库"
                width="100"
                align="center">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
              {{item.shipWarehouse}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                label="本次发货数量"
                width="100"
                align="center">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
              {{item.shipNum}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
              label="司机姓名"
              width="100"
              align="center">
        <template slot-scope="scope">
          {{scope.row.driverName}}
        </template>
      </el-table-column>
        <el-table-column
                label="司机手机"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.driverPhone}}
          </template>
        </el-table-column>
        <el-table-column
                label="车牌号"
                width="120"
                align="center">
          <template slot-scope="scope">
              {{scope.row.driverCardNo}}
          </template>
        </el-table-column>
        <el-table-column
                label="收货信息"
                width="300">
          <template slot-scope="scope">
            {{scope.row.addressInfo}}
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                prop="driverName"
                label="批号"
                width="120"
                align="center">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
              {{item.batchNo}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="批次号类型"
          width="100">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
              {{item.goodsPayMethod}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                class-name="cspantd"
                prop="driverName"
                label="结算方式"
                width="450">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
              {{item.settleType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                label="运联含税运费"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.orderInputFreight}}
          </template>
        </el-table-column>
        <el-table-column
                label="实际运费"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualFreight}}
          </template>
        </el-table-column>
        <el-table-column
                label="运费差异"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.diffFreight}}
          </template>
        </el-table-column>
        <el-table-column
                label="运费差异承担"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.diffFreightType}}
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--                align="center"-->
<!--                label="司机运费"-->
<!--                width="100">-->
<!--          <template slot-scope="scope">-->
<!--            {{scope.row.driverExpress}}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
                align="center"
                label="费用类型"
                width="100">
          <template slot-scope="scope">
            {{scope.row.freightType}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="是否报销"
                width="80">
          <template slot-scope="scope">
            {{scope.row.settlementState}}
          </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.status}}
          </template>
        </el-table-column>
        <el-table-column
                label="业务员"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column
                label="派单员"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.driverChargeUserName}}
          </template>
        </el-table-column>
        <el-table-column
                width="100"
                fixed="right"
                label="操作"
                align="center">
          <template slot-scope="scope">
            <el-button
                    v-if="scope.row.status=='进行中' && scope.row.indexSendType == '采购发货'"
                    type="text"
                    size="mini"
                    @click="showSendForm(scope.row)">确认收货
            </el-button>
            <el-button
                    v-if="scope.row.kingStatus==1 && listQuery.type != 'all'"
                    type="text"
                    size="mini"
                    @click="showPrint(scope.row)">打印发货单
            </el-button>
<!--            <el-button-->
<!--              type="text"-->
<!--              size="mini"-->
<!--              v-if="scope.row.ymmOrderId"-->
<!--              @click="showMap(scope.row)">车辆轨迹-->
<!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :total="count">
      </el-pagination>
    </div>


    <!--确认到货-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose2"
            title="编辑发货单"
            :visible.sync="dialogVisible2"
            width="500px">
      <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules2">
        <el-form-item label="到货日期：" prop="goodsReceiptDate">
          <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="sendForm.goodsReceiptDate"
                  style="width:140px"
                  type="date"
                  placeholder="发货日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上传凭证：" prop="goodsReceipt">
          <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in sendForm.goodsReceipt ">
            <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
            <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
          </div>
          <el-upload
                  class="avatar-uploader"
                  :data="uploadToken"
                  action="https://upload.qiniup.com"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input v-model="sendForm.goodsReceipt" type="hidden" style="display: none"></el-input>
        </el-form-item>
        <el-form-item label="备注信息：">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="sendForm.goodsReceiptRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>

    <!--打印弹窗-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="closePrint"
            :visible.sync="dialogVisible4"
            width="900px">
      <div id="print-div">
        <div class="title">{{orderInfo.companyName}}送货单</div>
        <div class="paper-top">
          <el-row>
            <el-col :span="18">
              <el-row>
                <el-col :span="13"><span>编号：{{orderInfo.deliverSn}}</span></el-col>
                <el-col :span="11"><span>发货日期：{{orderInfo.shipTime}}</span></el-col>
              </el-row>
              <el-row>
                <el-col :span="13"><span>客户：{{orderInfo.customerName}}</span></el-col>
                <el-col :span="11"><span>合同总数量：{{orderInfo.goodsAllNum}}</span></el-col>
              </el-row>
              <el-row>
                <el-col :span="24"><span>地址：{{orderInfo.receiveAddress}}</span></el-col>
                <!--                        <el-col :span="6"><span>收款金额：</span></el-col>-->
              </el-row>
              <el-row>
                <el-col :span="13"><span>电话：{{orderInfo.receiverMobile}}</span></el-col>
                <el-col :span="11"><span>联系人：{{orderInfo.receiverName}}</span></el-col>
                <!--                        <el-col :span="6"><span>收款单号：</span></el-col>-->
              </el-row>
            </el-col>
            <el-col :span="6">
              <div style="overflow: hidden"><span style="float:left;width:70px">结算方式：</span><span style="float:left;width:calc(100% - 70px)">{{orderInfo.orderRemark}}</span></div>
            </el-col>
          </el-row>


        </div>
        <div class="good-table">
          <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
              <th align="center" width="12.5%"><div style="white-space:nowrap;">商品名称</div></th>
              <th align="center" width="15%"><div style="white-space:nowrap;">规格型号</div></th>
              <th align="center" width="3%"><div style="white-space:nowrap;">单位</div></th>
              <th align="center" width="10%"><div style="white-space:nowrap;">发货数量</div></th>
              <th align="center" width="14%"><div style="white-space:nowrap;">金额</div></th>
              <th align="center" width="12.5%"><div style="white-space:nowrap;">合同单号</div></th>
              <th align="center" ><div style="white-space:nowrap;">备注</div></th>
            </tr>
            <tr v-for="item in orderInfo.deliverGoods">
              <td align="center"><div style="word-break:break-all">{{item.goodsName}}</div></td>
              <td align="center"><div style="white-space:nowrap;font-size:12px;">{{item.goodsSn}}</div></td>
              <td align="center" style="white-space:nowrap;width:40px">{{item.goodsUnit}}<div></div></td>
              <td align="center" style="white-space:nowrap;"><div>{{item.goodsNum}}</div></td>
              <td align="center"><div style="white-space:nowrap;"> </div></td>
              <td align="center"><div style="white-space:nowrap;">{{item.orderSn}}</div></td>
              <td align="center"><div style="word-break:break-all;min-width:60px">{{item.orderRemark}}</div></td>
            </tr>
            <tr>
              <td colspan="3" align="center">数量合计</td>
              <td colspan="4">{{orderInfo.goodsNum}}</td>
            </tr>
          </table>
        </div>
        <div class="paper-bottom" style="position: relative">
<!--          <img :src="orderInfo.companyImage" style="position: absolute;right: 165px; width: 156px;top: 55px;" v-if="checked"/>-->
          <el-row>
            <el-col :span="8"><span>提货人及公司(签字)</span></el-col>
            <el-col :span="8" style="text-align: center"><span>客户签收(盖公章)</span></el-col>
            <el-col :span="8" style="text-align: right"><span>业务员：{{orderInfo.userName}}</span></el-col>
            <!--                        <el-col :span="4" style="text-align: right"><span>制单：{{orderInfo.authName}}</span></el-col>-->
          </el-row>
          <el-row style="margin-top:50px;">
            <el-col :span="12"><span style="font-weight: bold">客户其他需求：</span></el-col>
          </el-row>
          <!--                    <el-row>-->
          <!--                        <el-col :span="12" :offset="12"><span>地址：</span></el-col>-->
          <!--                    </el-row>-->
          <!--                    <el-row>-->
          <!--                        <el-col :span="12" :offset="12"><span>网址：</span></el-col>-->
          <!--                    </el-row>-->
          <!--                    <el-row>-->
          <!--                        <el-col :span="12" :offset="12"><span>邮箱：</span></el-col>-->
          <!--                    </el-row>-->
          <el-row style="margin-top:10px">
            <div style="display: inline-block">
              <div>注：本单白色联为（发货联），红色为（客户联），蓝色为(销售部),绿单为(仓库联)，黄色为(存根联)</div>
              <div style="text-align: right">仓库发货人签字:</div>
            </div>
            <!--                        <el-col :span="24">注：本单白色联为（发货联），红色为（客户联），蓝色为(销售部),绿单为(仓库联)，黄色为(存根联)-->
            <!--                          <span style="padding-left:30px">仓库发货人签字：</span>-->
            <!--                        </el-col>-->
          </el-row>
          <!--                    <el-row style="margin-top:10px;">-->
          <!--                        <el-col :span="12" :offset="12"><span>仓库发货人签字：</span></el-col>-->
          <!--                    </el-row>-->
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
      </div>
    </el-dialog>
<!--    <trajectoryMap ref="trajectoryMap"></trajectoryMap>-->
  </div>
</template>
<script>
  import {getCustomerOption,getOrderUsersList,getDeliverList,deliverUpdate,getQiniuToken,postDeliverVoucher,saleDeliversExportAll,deliverBill} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import {validateCommission} from '@/utils/validate';
  import store from '@/store'
  import "@/utils/jQuery.print"
  import { mapGetters } from 'vuex'
  // import trajectoryMap from '@/views/components/trajectoryMap'
  const defaultListQuery={
    pageNum: 1,
    pageSize: 10,
    goodsName: '',
    createDate:null,
    deliverDate:null,
    customerName:null,
    deliverSn:'',
    driverKeywords:'',
    status:null,
    driverState:null,
    deliverType:null,
    expressState:null,
    settlementState:null,
    driverChargeUserId:null,
    isYunlianDeliver:'',
    freightType:'',
    type:'sale',
    userId:null,
    customerNumber:''
  };
  const defaultSendForm={
    deliverId: '',
    goodsReceipt: [],
    goodsReceiptRemark: '',
    goodsReceiptDate:''
  };
  export default {
    name: "index",
    data(){
      const isvalidateCommission = (rule, value, callback) => {
        if (!validateCommission(parseFloat(value))) {
          callback(new Error('非负整数或小数'))
        } else if(value > 99999999){
          callback(new Error('最大值为99999999'))
        }else {
          callback()
        }
      };
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        count: 0,
        listLoading: false,
        roles:store.getters.roles ? store.getters.roles : [],
        userOptionList:[],
        dialogVisible:false,
        btnLoading:false,
        quitForm:{
          deliverSn:'',
          freight:'',
          deliverShipNum:'',
          deliverId:'',
          actualFreight:'',
          driverExpress:'',
          driverName:'',
          driverPhone:'',
          driverCardNo:'',
          remark:''
        },
        rules:{
          actualFreight:[{required: true, trigger: 'blur' ,validator: isvalidateCommission}],
          driverName:[{required: true, trigger: 'blur' ,message: '请输入司机姓名',}],
          driverExpress:[{required: true, trigger: 'blur',validator: isvalidateCommission}],
          driverPhone:[{required: true, trigger: 'blur' ,message: '请输入司机手机号',}],

        },
        sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
        rules2:{
          goodsReceiptDate:[{required: true, trigger: 'blur' ,message: '请输入到货时间',}],
          goodsReceipt:[{required: true, trigger: 'change' ,message: '请上传到货凭证',}],
        },
        dialogVisible2:false,
        btnLoading2:false,
        imgs:[],
        uploadToken:{
          token:'',
        },
        imgDomain:'',
        orderInfo:{},
        dialogVisible4:false,
        btnloading3:false,
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),
      allSaleDeliver(){
        if(this.roles.indexOf("allSaleDeliver") != -1){
          return true
        }else{
          return false
        }
      },
      exportAllSaleDeliver(){
        if(this.roles.indexOf("exportAllSaleDeliver") != -1){
          return true
        }else{
          return false
        }
      },

    },
    created() {
      if (localStorage.getItem('deliverListQuery')){
        this.listQuery = JSON.parse(localStorage.getItem('deliverListQuery'));
        localStorage.removeItem('deliverListQuery');
      }
      this.getList();
      this.getUserOptionList();
      this.getUploadToken();
    },
    filters: {
      formatCreateTime(time) {
        if(time){
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }else{
          return '--'
        }
      },
    },
    components : {
      // trajectoryMap:trajectoryMap
    },
    methods:{
      showMap(item){
        console.log("item",item)
        // this.$refs.trajectoryMap.showMap(item.deliverSn,item.ymmOrderId);
      },
      //去详情页
      toOrderDetail(type,item){
        let routeData = this.$router.resolve({name:'saleDetail',query:{id:item.orderId,type:type}});
        window.open(routeData.href);
        // this.$router.push({name:'saleDetail',query:{id:item.orderId,type:type}})
      },
      //获取合同详情
      getPageInfo(deliverId){
        this.loading = true;
        deliverBill({deliverId:deliverId}).then(res=>{
          this.orderInfo = res;
        });
      },
      //显示打印弹窗
      showPrint(item){
        this.dialogVisible4 = true;
        this.getPageInfo(item.deliverId)
      },
      //关闭打印弹窗
      closePrint(){
        this.dialogVisible4 = false;
      },

      //打印
      printdiv(){
        $("#print-div").print({
          globalStyles:true,//是否包含父文档的样式，默认为true
          mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
          stylesheet:null,//外部样式表的URL地址，默认为null
          noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
          iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
          append:null,//将内容添加到打印内容的后面
          prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
          deferred: $.Deferred()//回调函数
        });
      },
      //获取七牛TOKEN
      getUploadToken(){
        getQiniuToken().then((res)=>{
          this.uploadToken.token = res.token;
          this.imgDomain = res.domain
        })
      },

      //上传图片
      handleAvatarSuccess(res){
        this.sendForm.goodsReceipt.push(this.imgDomain+res.key)

      },

      //删除图片
      delImg(index){
        this.sendForm.goodsReceipt.splice(index,1)
      },

      //显示收货
      showSendForm(item){
        this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
        this.sendForm.deliverId = item.deliverId;
        this.dialogVisible2 = true;
      },

      //关闭收货
      handleClose2(){
        this.dialogVisible2 = false;
        this.$refs.sendForm.clearValidate();
      },

      //提交收货信息
      handleConfirm2(){
        this.$refs.sendForm.validate((valid) => {
          if (valid) {
            this.btnLoading2 = true;
            let data = JSON.parse(JSON.stringify(this.sendForm));
            postDeliverVoucher(data).then(()=>{
              this.btnLoading2 = false;
              this.handleClose2();
              this.getList();
            }).catch(()=>{
              this.btnLoading2 = false;
            })
          }
        })
      },
      //查看发货单
      toDetail(item){
        localStorage.setItem('deliverListQuery', JSON.stringify(this.listQuery));
        console.log(item)
        let routeData = this.$router.resolve({name:'deliverCon',query:{id:item.deliverId,type:'see'}});
        window.open(routeData.href);
      },

      //编辑发货单
      showDetail(item){
        this.dialogVisible = true;
        this.quitForm.deliverSn = item.deliverSn;
        this.quitForm.freight = item.freight;
        this.quitForm.deliverShipNum = item.deliverShipNum;
        this.quitForm.deliverId = item.deliverId;
        this.quitForm.actualFreight = item.actualFreight;
        this.quitForm.driverExpress = item.driverExpress;
        this.quitForm.driverName = item.driverName;
        this.quitForm.driverPhone = item.driverPhone;
        this.quitForm.driverCardNo = item.driverCardNo;
        this.quitForm.remark = item.shipRemark;
      },
      //关闭编辑弹窗
      handleClose(){
        this.dialogVisible = false;
        this.$refs.quitForm.clearValidate();
      },

      //提交编辑弹窗
      handleConfirm(){
        this.$refs.quitForm.validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.quitForm));
            deliverUpdate(data).then(()=>{
              this.btnLoading = false;
              this.handleClose();
              this.getList();
            }).catch(()=>{
              this.btnLoading = false;
            })
          }
        })
      },

      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

      //选择员工名称
      handleSelectUserName(key,item){
        this.listQuery[key] = item.userId;
      },


      //客户名称输入匹配
      querySearch(queryString, cb){
        getCustomerOption({keywords:queryString}).then((res)=>{
          cb(res);
        })
      },


      //选择客户名称
      handleSelectCustomerName(item){
        this.listQuery.customerName = item.customerName
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
        this.listQuery.type = key;
        this.handleSearchList();
      },
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取发货列表
      getList() {
        this.listLoading = true;
        getDeliverList(this.listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },

      //下载excle
      downloadExcel(){
        let params = JSON.parse(JSON.stringify(this.listQuery));
        this.btnloading3 = true;
        saleDeliversExportAll(params).then((res)=>{
          this.btnloading3 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnloading3 = false;
        })
      },

      //下载表格数据格式化
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

    },
  }
</script>

<style lang="scss" scoped>
  .cspantd{
    padding:0 !important;
    .cell{
      padding:0 !important;
      .tdDiv{
        padding:5px 10px;
        min-height: 20px;
        line-height: 20px;
        box-sizing: content-box;
      }
    }
  }
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
  .price-block{
    font-size:12px;
    line-height:30px;
    .lab{
      display: inline-block;
      width:100px;
      text-align: right;
    }
    .text{
      display: inline-block;
    }
  }
  #print-div{
    font-size:14px !important;
    font-family: "Microsoft YaHei";
    color:#000;
    .title{
      font-size:28px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
    }
    .paper-top{
      margin-top:20px;
      line-height: 20px !important;
    }
    .good-table{
      margin-top:0px;
      table{
        border-left:1px solid #000;
        border-bottom:1px solid #000;
        td,th{
          font-weight: normal;
          border-right:1px solid #000;
          border-top:1px solid #000;
          padding:5px 10px;
          line-height: 20px;
        }
      }
    }
    .paper-bottom{
      margin-top:0px;
      line-height: 20px;
    }
  }
</style>
